<template>
  <div class="row">
    <p class="label">省</p>
    <Select v-model="$store.state.bargain.form.provinceId" :disabled="disabled" @on-change="onChangeProvince">
      <Option v-for="(item, index) in addressData" :key="index" :value="item.id">{{ item.value }}</Option>
    </Select>
    <p class="label">市</p>
    <Select v-show="cityData.length" v-model="$store.state.bargain.form.cityId" :disabled="disabled" @on-change="onChangeCity">
      <Option v-for="(item, index) in cityData" :key="index" :value="item.id">{{ item.value }}</Option>
    </Select>
    <p v-show="areaData.length" class="label">区</p>
    <Select v-if="areaData.length" v-model="$store.state.bargain.form.aaade" :disabled="disabled">
      <Option v-for="(item, index) in areaData" :key="index" :value="item.id">{{ item.value }}</Option>
    </Select>
    <Button type="primary" size="middle" class="ml" :disabled="disabled" @click="onGetDistirbutor(true)">加载经销商</Button>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    disabled: Boolean
  },
  data () {
    return {
      id: this.$route.query.id || '',
      provinceId: '',
      cityId: '',
      areaId: ''
    }
  },
  computed: {
    ...mapGetters(['bargainSelectedDelay']),
    addressData () {
      return this.$store.getters.addressList
    },
    cityData () {
      return this.$store.getters.cityList
    },
    areaData () {
      return this.$store.getters.areaListQ
    }
  },
  watch: {
    bargainSelectedDelay (newVal) {
      this.onGetDistirbutor()
    }
  },
  mounted () {
    if (!this.$store.state.bargain.provinceId) {
      this.init()
    }
  },
  methods: {
    init () {
      let that = this
      this.$store.dispatch('ajaxAddress', { type: 'province' }).then(idProvince => {
        if (this.id) {
          that.$store.state.bargain.form.provinceId = idProvince
          idProvince && that.$store.dispatch('ajaxAddress', { value: idProvince, type: 'city' }).then(idCity => {
            that.$store.state.bargain.form.cityId = idCity
            idCity && this.$store.dispatch('ajaxAddress', { value: idCity, type: 'area' }).then(idArea => {
              that.$store.state.bargain.form.aaade = idArea
            })
          })
        }
      })
    },
    onGetDistirbutor (data) {
      if (!data) {
        this.$store.state.bargain.form.provinceId = ''
        this.$store.state.bargain.form.cityId = ''
        this.$store.state.bargain.form.aaade = ''
      }
      let param = {
        provinceId: this.$store.state.bargain.form.provinceId == 0 ? '' : this.$store.state.bargain.form.provinceId,
        cityId: this.$store.state.bargain.form.cityId == 0 ? '' : this.$store.state.bargain.form.cityId,
        areaId: this.$store.state.bargain.form.aaade == 0 ? '' : this.$store.state.bargain.form.aaade
      }
      param.isSearch = data
      param.type = 'distribute'
      this.$store.dispatch('getDistributData', param)
    },
    onChangeProvince (id) {
      let that = this
      if (id == 0) {
        this.$store.state.bargain.form.cityId = ''
        this.$store.state.bargain.form.aaade = ''
        this.$store.commit('setCityEmpty')
        this.$store.commit('setAreaEmpty')
      }
      id && this.$store.dispatch('ajaxAddress', { value: id, type: 'city' }).then(idCity => {
        that.$store.state.bargain.form.cityId = idCity
        // idCity && that.$store.dispatch('ajaxAddress', {value: idCity, type: 'area'}).then(idArea => {
        //   that.$store.state.bargain.form.aaade = idArea
        // })
      })
    },
    onChangeCity (id) {
      let that = this
      if (id == 0) {
        this.$store.commit('setAreaEmpty')
      }
      id && this.$store.dispatch('ajaxAddress', { value: id, type: 'area' }).then(idArea => {
        that.$store.state.bargain.form.aaade = idArea
      })
    }
  }
}
</script>

